import React, { Component } from 'react'
import { Card, Button, Form, Input, Select, message } from 'antd'
import { to } from 'await-to-js'
import './httpadd.less'
import { reqHttpListOne, reqHttpUpdate, reqHttpAdd } from '../../../../api'
const { Option } = Select;
class HttpAdd extends Component {

    state = {
        isphoneRequire: false,
        url: '',
        mark: '',
        remarks: '',
        status: 1,
        urlStatus: 2,
        notifyStatus: 2,
        phone: '',
        _id: '0'
    }

    async componentDidMount() {
        let _id = this.props.match.params._id
        if (_id !== '0') {
            let [err, res] = await to(reqHttpListOne(_id))
            if (err) return console.log(err)
            if (res.code !== 0) return message.error(res.msg)
            const { url, mark, remarks, status, urlStatus, notifyStatus, phone } = res.body
            let isphoneRequire = notifyStatus === 1
            this.setState({ url, mark, remarks, status, urlStatus, notifyStatus, phone, isphoneRequire, _id })
        }
    }
    handleSubmit = e => {
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let postData = JSON.parse(JSON.stringify(values))
                // let err, res
                if (this.state._id !== '0') {
                    postData._id = this.state._id
                    reqHttpUpdate(postData).then(res => {
                        if (res.code !== 0) return message.error(res.msg)
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.go(-1)
                        }, 2000)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    reqHttpAdd(postData).then(res => {
                        if (res.code !== 0) return message.error(res.msg)
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.go(-1)
                        }, 2000)
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        })
    }
    handleNotifyStatusChange = (notifyStatus) => {
        this.setState({
            isphoneRequire: notifyStatus === 1
        })

    }

    handleMarkChange = (rules, mark, callback) => {
        this.setState({ mark })
        callback()
    }

    goBack = () => {
        this.props.history.go(-1)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { isphoneRequire, url, mark, remarks, status, urlStatus, notifyStatus, phone } = this.state
        return (
            <Card title="编辑http站点" className="httpadd">
                <Form onSubmit={this.handleSubmit} className="login-form" labelCol={{ span: 2 }} wrapperCol={{ span: 20 }}>
                    <Form.Item label="域名" >
                        {getFieldDecorator('url', {
                            rules: [{ required: true }],
                            initialValue: url,
                        })(
                            <Input
                                placeholder="请输入域名"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="标记" >
                        {getFieldDecorator('mark', {
                            rules: [{ required: true }, { validator: this.handleMarkChange },],
                            initialValue: mark,
                        })(
                            <Input
                                placeholder="请输入html中的标记"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 20, offset: 2 }}>{mark && (
                        <div><span>请在你的html代码中加入以下代码：</span>
                            <span style={{ background: 'orange' }}>
                                &lt;div style="display: none;"&gt;{mark}&lt;/div&gt;
                            </span>
                            <br />
                            <span >或使用站点的标题：</span>
                            <span>
                                &lt;title&gt;<span style={{ background: 'orange' }}>站点名称</span>&lt;/title&gt;
                            </span>
                        </div>
                    )}</Form.Item>
                    <Form.Item label="备注" >
                        {getFieldDecorator('remarks', {
                            rules: [],
                            initialValue: remarks,
                        })(
                            <Input
                                placeholder="请输入备注"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="监控" wrapperCol={{ span: 4 }}>
                        {getFieldDecorator('status', {
                            rules: [],
                            initialValue: status
                        })(
                            <Select
                                placeholder="请选择是否开启http监控"
                            >
                                <Option value={1}>开启</Option>
                                <Option value={2}>关闭</Option>
                            </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="站点状态" wrapperCol={{ span: 4 }}>
                        {getFieldDecorator('urlStatus', {
                            rules: [],
                            initialValue: urlStatus,
                        })(
                            <Select
                                placeholder="请选择是否开启http监控"
                                disabled={true}
                            >
                                <Option value={1}>在线</Option>
                                <Option value={2}>离线</Option>
                            </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="离线短信通知" wrapperCol={{ span: 4 }}>
                        {getFieldDecorator('notifyStatus', {
                            rules: [],
                            initialValue: notifyStatus,
                        })(
                            <Select
                                placeholder="请选择是否开启离线通知"
                                onChange={this.handleNotifyStatusChange}
                            >
                                <Option value={1}>开启</Option>
                                <Option value={2}>关闭</Option>
                            </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="手机号" wrapperCol={{ span: 4 }}>
                        {getFieldDecorator('phone', {
                            rules: [{ required: isphoneRequire }, { pattern: /^1[3456789]\d{9}$/, message: '手机号不正确' },],
                            initialValue: phone,
                        })(

                            <Input
                                placeholder="请输入手机号"
                            />,
                        )}
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 2}}>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            提交
                        </Button>
                        <Button onClick={this.goBack} className="login-form-button-back">
                            返回
                        </Button>
                    </Form.Item>
                </Form>

            </Card>
        )
    }
}

const WrappedHttpAdd = Form.create()(HttpAdd)
export default WrappedHttpAdd
